<!Doctype html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
</head>
<body>
<form action="">
    <table align="center">
        <caption><h2>注册</h2></caption>
        <tr>
            <td>用户名：</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" name="repass"></td>
        </tr>
        <tr>
            <td>手机号：</td>
            <td><input type="text" name="tel"></td>
        </tr>
        <tr>
            <td>邮箱：</td>
            <td><input type="text" name="email"></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="reset">
                <input type="submit">
            </td>
        </tr>
    </table>
</form>
</body>
<script>
// 表单验证通常会使用form的submit事件
var form = document.querySelector("form");
var pass = document.querySelector("[name='password']")
var repass = document.querySelector("[name='repass']")
form.onsubmit = function(){
    // 开始验证
    // 验证用户名：由字母、数字、下划组成，字母开头，4~10位
    var reg = /^[a-zA-Z]\w{3,9}$/;
    var username = document.querySelector("[name='username'").value;
    if(!reg.test(username)){
        alert('用户名不符合规则')
        return false;
    }

    // 密码：字母和数字组成：3~12位
    var reg = /^[a-zA-Z0-9]{3,12}$/;
    var password = pass.value;
    if(!reg.test(password)){
        alert('密码不符合规则')
        return false;
    }

    // 确认密码
    if(repass.value != pass.value){
        alert('两次密码不一致')
        return false
    }

    // 手机号
    var reg = /^1[3-9]\d{9}$/;
    if(!reg.test(document.querySelector("[name='tel']").value)){
        alert('手机号不对')
        return false;
    }

    // 邮箱
    var reg = /(^[a-zA-Z]\w{5,17}@(163|126)\.com$)|(^[1-9]\d{4,10}@qq\.com$)/;
    if(!reg.test(document.querySelector("[name='email']").value)){
        alert('邮箱不对')
        return false;
    }
}
</script>
</html>